import { useModel, history } from "umi";
import { Breadcrumb, Avatar, Space } from "antd";
import { MinusOutlined, CloseOutlined } from "@ant-design/icons";
import { useEffect } from "react";
import { useReactive } from "ahooks";
import Jdenticon from "react-jdenticon";
import "./main.header.css";

const MessagesHeader = () => {
    const { breadcrumbs } = useModel("routers");
    const { applicationInfo, applicationName } = useModel("application.info");
    const { organizationInfo } = useModel("organization.info");
    const { messageInfo } = useModel("message.info");

    const state = useReactive({
        title: "",
    });

    useEffect(() => {
        let appTitle = applicationInfo?.aiName || applicationName;
        let appVer = applicationInfo?.aiVenu || "";
        let orgTitle = organizationInfo?.fullName || "";
        state.title = appTitle + " - " + appVer + " - " + orgTitle;
        document.title = state.title;
    }, [applicationInfo, organizationInfo]);

    const closeClick = () => {
        window.close();
        currentWindow.close();
    };

    return (
        <div className="header drag">
            <div style={{ display: "flex", justifyContent: "space-between" }}>
                <Space>
                    <Avatar shape="square" size={18} src={<Jdenticon size="18" value={state.title} />} style={{ marginTop: -3, backgroundColor: "#fff" }} />
                    <div>
                        {messageInfo?.mmType || "应用"}消息 - {state.title}
                    </div>
                </Space>
                <Breadcrumb className="no-drag" style={{ marginTop: 2 }}>
                    {breadcrumbs.map((item, index) => (
                        <Breadcrumb.Item key={index} style={{ color: "#fff" }} onClick={() => item?.pathname && history.replace(item.pathname)}>
                            <a>{item.title}</a>
                        </Breadcrumb.Item>
                    ))}
                </Breadcrumb>
                <div className="controls no-drag">
                    <Space size={0}>
                        <a title="最小化当前窗口" onClick={() => currentWindow.minimize()}>
                            <MinusOutlined />
                        </a>
                        <a title="关闭应用" onClick={closeClick}>
                            <CloseOutlined />
                        </a>
                    </Space>
                </div>
            </div>
        </div>
    );
};

export default MessagesHeader;
